<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #nav{
            border: solid 1px #666;
            width: 300px;
            margin: 0 auto;
        }
        #nav>.title{
            border-bottom: solid 1px #ccc;
            padding: 5px 8px;
            background-color: #eee;
            /* 将鼠标外形改为手掌 */
            cursor: pointer;
        }
        #nav>.con{
            padding: 8px;
            display: block;
        }
    </style>
</head>
<body>
    <div id="nav">
        <div class="title" onclick="aa()">程序法则</div>
        <div class="con">
            每天都写代码，从事开发的工作。
            每天都写代码，从事开发的工作。
            每天都写代码，从事开发的工作。
            每天都写代码，从事开发的工作。
            每天都写代码，从事开发的工作。
        </div>
    </div>
    <script>
        //获取到标题和内容元素对象
        var a=document.getElementsByClassName("title")[0];
        var b=document.getElementsByClassName("con")[0];
        console.log(b)
        //编写代码块
        function aa(){
            //display默认属性是""，或者block
            if(b.style.display==""){
                b.style.display="none";
            }else{
                b.style.display=""
            }
        }

    </script>
</body>
</html>